<template>
	<view class="ray-list content">
		<view class="ray-list__body list-panel" style="margin-top: 10rpx;">
			<view class="list-view">
				<view class="ray-panel">
					<view class="ray-content">
						<view class="class-item" v-for="(item, index) in list" :key="index" @click="jumpHandle_class(item)">
							<view class="item-border">
								<image :src="item.imgUrl" mode="aspectFill"></image>
								<view class="content">{{ item.className || '' }}</view>
								<view class="collect">
									<view class="collect-item" @click.stop="startHandle(item, 1, index)" v-if="item.likeType == 2">
										<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/start.png" mode="aspectFit" />
										<text>{{ item.favoriteNum }}</text>
									</view>
									<view class="collect-item" @click.stop="startHandle(item, 2, index)" v-else>
										<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/startActive.png" mode="aspectFit" />
										<text>{{ item.favoriteNum }}</text>
									</view>
									<view class="collect-item">
										<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/shoucang.png" mode="aspectFit" />
										<text>{{ item.viewNum != null ? item.viewNum : 0 }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ray-list__foot"><mix-load-more :status="loadMoreStatus"></mix-load-more></view>
	</view>
</template>

<script>
import http from '../../common/request.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		return {
			subjectId: '',
			pageNum: 1,
			pageSize: 12,
			allowRequest: true,
			loadMoreStatus: 0, //0加载前，1加载中，2没有更多了
			list: [],
			emptyArr: [
				{
					likeType: 0,
					count: 1
				},
				{
					likeType: 0,
					count: 1
				}
			]
		};
	},
	onLoad: function(option) {
		//页面第一次加载是会触发，可以把一些不需要实时更新的数据放入
		this.subjectId = option.subjectId;
	},
	components: {
		mixLoadMore
	},
	onReachBottom: function(option) {
		//当划到最底部的时候触发事件
		this.loadData();
	},
	mounted() {
		this.loadData();
	},
	methods: {
		getParameters() {
			const { pageNum, pageSize, subjectId } = this;
			return { pageNum, pageSize, subjectId };
		},
		loadData(flag) {
			const { list, pageNum, pageSize, allowRequest } = this;
			if (!allowRequest) {
				return;
			}
			this.loadMoreStatus = 1;
			http('/api/subjectClass/appSubjectClassList', { data: { ...this.getParameters() }, method: 'GET' }).then(
				result => {
					if (result.data) {
						this.allowRequest = result.total / pageSize > pageNum;
						if (this.allowRequest) {
							this.loadMoreStatus = 0;
						} else {
							this.loadMoreStatus = 2;
						}
						this.pageNum++;

						this.list = list.concat(result.data || []);
						this.list.map(item => {
							this.emptyArr.push({
								likeType: item.likeType,
								count: item.viewNum
							});
						});
					} else {
						this.loadMoreStatus = 0;
					}
				},
				result => {
					this.loadMoreStatus = 0;
				}
			);
		},
		// onReachBottom() {
		// 	this.loadData();
		// },

		startHandle(item, index, index1) {
			http('/api/subjectClass/favorites', {
				method: 'post',
				data: {
					classId: item.classId,
					likeType: index
				}
			}).then(result => {
				item.favoriteNum = result.data.count;
				if (item.likeType == 1) {
					item.likeType = 2;
				} else {
					item.likeType = 1;
				}
			});
		},

		jumpHandle_class(item) {
			http('/api/subjectClass/watch', {
				method: 'post',
				data: {
					classId: item.classId
				}
			}).then(result => {
				item.viewNum = item.viewNum + 1;
				uni.navigateTo({
					url: '../web_view?url=' + encodeURIComponent(item.classUrl),
					animationType: 'pop-in',
					animationDuration: 200
				});
			});
		}
	}
};
</script>

<style scoped lang="less">
.collect {
	color: #b2b1ae;
	font-size: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx 22rpx 20rpx;
	.collect-item {
		display: inline-flex;
		align-items: center;
		image {
			width: 30rpx !important;
			height: 28rpx !important;
			margin-right: 12rpx;
		}
	}
}
</style>
